<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var myChart = echarts.init(document.getElementById('chart'));

		var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
			'7a', '8a', '9a', '10a', '11a',
			'12p', '1p', '2p', '3p', '4p', '5p',
			'6p', '7p', '8p', '9p', '10p', '11p'];
		var days = ['Saturday', 'Friday', 'Thursday',
			'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

		//随机生成数据
		function random(){
			var result=[];
			for(var i=0;i<24;i++){
				result.push([i,Math.round(Math.random()*10)]);
			}
			return result;
		}

		//生成一条轴
		/* myChart.setOption({
			title:{
				text:'Saturday',
			},
			singleAxis:{
				type:'category',
				data:hours,
				boundaryGap:false,
				axisLabel:{
					interval:2,
				}
			},
			tooltip:{

			},
			series:{
				type:'scatter',
				coordinateSystem:'singleAxis',
				data:random(),
				symbolSize:function(val){
					return val[1]*4;
				}
			}
		}); */


		var option={
			title:[],
			tooltip:{},
			singleAxis:[],
			series:[]
		};
		
		days.forEach(function(item,index){
			option.title.push({
				text:item,
				top:index*100/7+5+'%',
			});

			option.singleAxis.push({
				type:'category',
				data:hours,
				boundaryGap:false,
				axisLabel:{
					interval:2,
				},

				top:index*100/7+5+'%',
				height:100/7-10+'%',
				left:150,
			});

			option.series.push({
				singleAxisIndex:index,
				type:'scatter',
				coordinateSystem:'singleAxis',
				data:random(),
				symbolSize:function(val){
					return val[1]*4;
				}
			});
		});

		myChart.setOption(option);
	</script>
</body>

</html>
